import React from 'react';
import { Modal } from 'antd';
import DragM from 'dragm';

/**
 * 制定弹出框的组件，不通过路由也可以等同于出现一个界面
 * -
 */
export default ({ visible, title, children, ...other }) => {
	const wrapClass = `modal-move-${Math.random().toString(16).substring(2)}`;

	const updateTransform = (transformStr) => {
		document.getElementsByClassName(wrapClass)[0].style.transform = transformStr;
	};

	const titleNode = (
		<DragM updateTransform={updateTransform}>
			<div>{title}</div>
		</DragM>
	);

	return (
		<Modal
			wrapClassName={wrapClass}
			title={titleNode}
			visible={visible}
			destroyOnClose
			maskClosable={false}
			width={1000}
			afterClose={() => {
				try {
					document.getElementsByClassName(wrapClass)[0].style.transform = 'translate(0px, 0px)';
				} catch (e) {
					console.log(e);
				}
			}}
			{...other}
		>
			{children}
		</Modal>
	);
};
